<template>
  <div style="display: flex; justify-content: space-around; width: 100%">
    <el-card
      shadow="hover"
      style="width: 150px; border: none; cursor: pointer;"
      @click="this.$router.push({path: '/order', query: {type: 0}})"
    >
      <div class="item">
        <el-icon style="font-size: 50px">
          <CreditCard />
        </el-icon>
        待付款
      </div>
    </el-card>
    <el-card
      shadow="hover"
      style="width: 150px; border: none; cursor: pointer;"
      @click="this.$router.push({path: '/order', query: {type: 3}})"
    >
      <div class="item">
        <el-icon style="font-size: 50px">
          <Box />
        </el-icon>
        待收货
      </div>
    </el-card>
    <el-card
      shadow="hover"
      style="width: 150px; border: none; cursor: pointer;"
      @click="this.$router.push({path: '/order', query: {type: -1}})"
    >
      <div class="item">
        <el-icon style="font-size: 50px">
          <ArrowRight />
        </el-icon>
        全部订单
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item:hover {
  color: #3271ae;
}
</style>